<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
	<title>PlaneSpotter</title>

	<meta http-equiv="X-UA-Compatible" content="IE=9" />
	
	<link type="text/css" rel="stylesheet" href="<c:url value="/resources/main.css" />">
	<link type="text/css" rel="stylesheet" href="<c:url value="/resources/cloud-zoom.css" />">
	
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript" src="<c:url value="/resources/cloud-zoom.1.0.2.js" />"></script>
	
	<script type="text/javascript">
		$(document).ready(function(){
			$(function() {
				$( "#dateTaken" ).datepicker({
					showOn: "button",
					buttonImage: "<c:url value='/resources/calendar.gif'/>",
					buttonImageOnly: true,
					dateFormat: "dd/mm/yy",
					changeMonth: true,
					changeYear: true,
				});
			});
			
			$('#lookupButton').click(function(){
				var mark = $("#aircraft\\.mark").val();
				if(mark == '') {
					alert('Please provide aircraft mark');
					return;
				}
				$.post('<c:url value="/aircraft/details"/>', { mark : mark }, function(data) {
					alert(
							"Manufacturer: " + data.manufacturer + "\n" +
							"Model: " + data.model + "\n" +
							"Operator: " + data.operatorName + "\n" +
							"Serial Number: " + data.serialNumber
						);
				});
			});
		});
	</script>
	
</head>
<body>

		<sec:authorize access="hasRole('ROLE_ADMIN')">
			<div class="box">
		        <form:form method="post" modelAttribute="uploadForm">
		        	<table>
		        		<tr><td valign="top">Photo</td><td><img src="<c:url value='/file/thumbnail/${uploadForm.id}'></c:url>" border="0" title="${uploadForm.aircraft.model}"/></td></tr>
		            	<tr><td>Date taken</td><td><form:input path="dateTaken" /></td></tr>
		            	<tr><td>Aircraft Reg. Mark</td><td><form:input path="aircraft.mark" /><input id="lookupButton" type="button" value="Lookup" class="button"></td></tr>
		            	<tr><td>Airport</td><td><form:input path="airport.iata" /></td></tr>
		            	<tr><td valign="top">Comment</td><td><form:textarea cols="30" rows="5" path="comment" /></td></tr>
		            	<tr><td><input type="submit" class="button"/></td></tr>
		            </table>
		        </form:form>
			</div>
		</sec:authorize>

</body>
</html>
